<template>
  <div class="about">
     <my-header>
       <template #left>
         <div @click="$router.go(-1)">
           返回
         </div>
       </template>
       <template #center>
           购物清单
       </template>
       <template #right>
         <div @click="isEit=!isEit">
           {{isEit?'编辑':'完成'}}
         </div>
       </template>
     </my-header>
     <ul>
       <li v-for="(item,index) in list" :key="index">
         <input type="checkbox" @change="oneCheck" v-model="item.ischeck">
         <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic23.nipic.com%2F20120808%2F6608733_171352892000_2.jpg&refer=http%3A%2F%2Fpic23.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643506983&t=4da568f1b1ee9a1c85a879780fea8e45" alt="">
         <section>
           <h4>{{item.name}}</h4>
           <p>{{item.price}}</p>
         </section>
         <div>
           <p @click="item.num++">+</p>
           <p>{{item.num}}</p>
           <p @click="item.num==1?1:item.num--">-</p>
         </div>
       </li>
     </ul>
     <div class="foot">
        <label for=""><input type="checkbox" v-model="allcheck" @change="allChange">全选</label>
        <span>合计：￥{{allPrice}}</span>
        <span class="right" @click="del">{{isEit?'去结算':'删除选中'}}（{{allNum}}）</span>
     </div>
  </div>
</template>
<script>
import myHeader from '../components/myHeader.vue';
import { reactive,computed, toRefs } from 'vue';
import { useStore } from 'vuex';
export default {
  components: { myHeader },
  setup(props) {
    const store = useStore();
    const data = reactive({
      list: computed(() => store.state.cartList),
      allcheck: false, // 全选的状态
      allPrice: computed(() => {
        let price = 0;
        data.list.forEach(item => {
           if (item.ischeck){
             price+=item.price*item.num
           }
        })
        return price
      }),
      allNum: computed(() => {
        let num = 0;
        data.list.forEach(item => {
           if (item.ischeck){
             num+=item.num
           }
        })
        return num
      }),
      isEit: true, // 是否显示编辑
    })

    const allChange = () => { // 全选的事件
       data.list.forEach(item => {
         item.ischeck = data.allcheck
       })
    }
    const oneCheck = () => { // 单选的事件
      data.allcheck = data.list.every(item => item.ischeck);
    }
    const del = () => { // 去删除
       if (data.isEit) return;
       store.commit('del');
    }
    return {
      ...toRefs(data),
      allChange,
      oneCheck,
      del
    }
  }
}
</script>
<style lang="scss" scoped>
  li{
    display: flex;
    align-items: center;
    padding: 0 10px;
    margin-top: 10px;
    img{
      width: 80px;
      margin: 0 10px;
    }
    section{
        margin-left: 10px;
        flex: 1;
        p{
          color: rgb(155, 13, 173);
        }
    }

  }
  .foot{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;
    .right{
      background: rgb(195, 20, 181);
      color: #fff;
      line-height: 50px;
      padding: 0 5px;
    }
  }
</style>